<template>
  <view class="search-bar">
    <input
      type="text"
      v-model="searchText"
      placeholder="请输入搜索内容"
      @input="onInput"
      class="search-input"
    />
    <button @click="onSearch" class="search-button">搜索</button>
    <button v-if="searchText" @click="clearSearch" class="clear-button">清空</button>
  </view>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

// 定义输入框的文本内容
const searchText = ref('');
// 定义组件触发的事件
const emits = defineEmits(['search']);

// 输入框输入事件处理函数
const onInput = () => {
  // 这里可以添加输入时的逻辑，比如实时搜索提示等
};

// 搜索按钮点击事件处理函数
const onSearch = () => {
  emits('search', searchText.value);
};

// 清空输入框内容
const clearSearch = () => {
  searchText.value = '';
};
</script>

<style scoped>
.search-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
}

.search-input {
  flex: 1;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

.search-button {
  padding: 8px 15px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  margin-right: 10px;
}

.clear-button {
  padding: 8px 15px;
  background-color: #ccc;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>